<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="initiateTeam-box">
		<!-- 赛制填写 -->
		<view class="from-system">
			<text class="name">赛制填写</text>
			<view class="from-box">
				<view class="from-item flex-row-center">
					<text class="from-name">比赛人数</text>
					<up-input border="none" type="number" placeholderClass="placeholderClass" fontSize="26rpx"
						color="#DEDEDE" placeholder="请输入比赛人数" v-model="contestInfo.playerNum"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">每组人数</text>
					<view class="example-body flex-row-center" @click="peopleShow=true">
						<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
							color="#DEDEDE" placeholder="请选择每组人数" v-model="contestInfo.teamMemberNum"></up-input>
						<up-icon name="arrow-right" color="#646668" size="28rpx"></up-icon>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">比赛轮数</text>
					<view class="example-body flex-row-center" @click="peopleShow=true">
						<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
							color="#DEDEDE" placeholder="请选择比赛轮数" v-model="contestInfo.roundNum"></up-input>
						<up-icon name="arrow-right" color="#646668" size="28rpx"></up-icon>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">会员级别</text>
					<view class="vipLv-body flex-row-center">
						<view :class="[contestInfo.vipLv==item.state?'active-vip':'vipLv-item','flex-center']"
							@click="changeVip(item.state)" v-for="(item,index) in vipLvList" :key="index">
							<text class="text">{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">报名时间</text>
					<view class="example-body flex-row-center">
						<view class="example-item" @click="datetimeStartShow=true">
							<up-input inputAlign="right" border="none" disabled placeholderClass="placeholderClass"
								fontSize="26rpx" color="#DEDEDE" placeholder="请选择开始时间"
								v-model="contestInfo.startTime"></up-input>
						</view>
						<text class="example-icon">-</text>
						<view class="example-item" @click="datetimeEndShow=true">
							<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
								color="#DEDEDE" placeholder="请选择结束时间" v-model="contestInfo.endTime"></up-input>
						</view>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">比赛时间</text>
					<view class="example-body flex-row-center" @click="timeShow=true">
						<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
							color="#DEDEDE" placeholder="请选择比赛时间" v-model="contestInfo.gameTime"></up-input>
						<up-icon name="arrow-right" color="#646668" size="28rpx"></up-icon>
					</view>
				</view>

			</view>
		</view>
		<!-- 比赛说明 -->
		<view class="from-system">
			<text class="name">比赛说明</text>
			<view class="from-box">
				<view class="from-item flex-row-center">
					<text class="from-name">一等奖</text>
					<view class="example-body flex-row-center">
						<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
							placeholder="请输入内容" v-model="contestInfo.firstPrize"></up-input>
						<up-number-box v-model="contestInfo.firstPrizeNum">
							<template #minus>
								<view class="minus-btn flex-center">
									<up-icon name="minus" color="#0B2532" size="24rpx"></up-icon>
								</view>
							</template>
							<template #input>
								<text class="input-num">{{contestInfo.firstPrizeNum}}</text>
							</template>
							<template #plus>
								<view class="plus-btn flex-center">
									<up-icon name="plus" color="#102C38" size="24rpx"></up-icon>
								</view>
							</template>
						</up-number-box>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">二等奖</text>
					<view class="example-body flex-row-center">
						<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
							placeholder="请输入内容" v-model="contestInfo.firstPrizeNum"></up-input>
						<up-number-box v-model="contestInfo.firstPrizeNum">
							<template #minus>
								<view class="minus-btn flex-center">
									<up-icon name="minus" color="#0B2532" size="24rpx"></up-icon>
								</view>
							</template>
							<template #input>
								<text class="input-num">{{contestInfo.firstPrizeNum}}</text>
							</template>
							<template #plus>
								<view class="plus-btn flex-center">
									<up-icon name="plus" color="#102C38" size="24rpx"></up-icon>
								</view>
							</template>
						</up-number-box>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">三等奖</text>
					<view class="example-body flex-row-center">
						<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
							placeholder="请输入内容" v-model="contestInfo.firstPrizeNum"></up-input>
						<up-number-box v-model="contestInfo.firstPrizeNum">
							<template #minus>
								<view class="minus-btn flex-center">
									<up-icon name="minus" color="#0B2532" size="24rpx"></up-icon>
								</view>
							</template>
							<template #input>
								<text class="input-num">{{contestInfo.firstPrizeNum}}</text>
							</template>
							<template #plus>
								<view class="plus-btn flex-center">
									<up-icon name="plus" color="#102C38" size="24rpx"></up-icon>
								</view>
							</template>
						</up-number-box>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">鼓励奖</text>
					<view class="example-body flex-row-center">
						<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
							placeholder="请输入内容" v-model="contestInfo.firstPrizeNum"></up-input>
						<up-number-box v-model="contestInfo.firstPrizeNum">
							<template #minus>
								<view class="minus-btn flex-center">
									<up-icon name="minus" color="#0B2532" size="24rpx"></up-icon>
								</view>
							</template>
							<template #input>
								<text class="input-num">{{contestInfo.firstPrizeNum}}</text>
							</template>
							<template #plus>
								<view class="plus-btn flex-center">
									<up-icon name="plus" color="#102C38" size="24rpx"></up-icon>
								</view>
							</template>
						</up-number-box>
					</view>
				</view>
			</view>
		</view>

		<!-- 组队描述 -->
		<view class="from-system">
			<!-- style="margin-bottom: 32rpx	;" -->
			<text class="name">比赛描述</text>
			<view class="" style="height: 32rpx;"></view>
			<view class="from-box">
				<up-textarea border="none" placeholderClass="placeholderClass" v-model="contestInfo.description"
					placeholder="请输入比赛描述" autoHeight></up-textarea>
				<!-- 上传图片 -->
				<view style="margin-top: 24rpx;">
					<up-upload @delete="deletePic" :fileList="fileList" @afterRead="afterRead" name="1" multiple
						:maxCount="9" width="200rpx" height="200rpx">
						<view class="upload-box flex-center">
							<up-icon name="camera" color="#999999" size="70rpx"></up-icon>
							<text class='text'>添加照片</text>
						</view>
					</up-upload>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit-box flex-center">
			<up-button text="立即提交" :customStyle="{'color':'#115B56'}"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" shape="circle"></up-button>
		</view>
		<!-- 时间选择组件 -->
		<up-datetime-picker @cancel="datetimeStartShow=false" v-model="nowTime" :show="datetimeStartShow"
			@confirm="confirmStartTime" mode="datetime"></up-datetime-picker>
		<up-datetime-picker @cancel="datetimeEndShow=false" v-model="nowTime" :show="datetimeEndShow"
			@confirm="confirmEndTime" mode="datetime"></up-datetime-picker>
		<up-picker :show="statusShow" @cancel="statusShow=false" :columns="columns"></up-picker>
		<!-- 人数选择组件 -->
		<up-picker :show="peopleShow" @cancel="peopleShow=false" @confirm="confirmPeople"
			:columns="columns"></up-picker>
		<!-- 时间选择组件 -->
		<up-datetime-picker :show="timeShow" :minDate="Date.now()" v-model='nowTime' @cancel="timeShow=false"
			@confirm="confirmGameTime" mode="datetime"></up-datetime-picker>
	</view>
</template>

<script setup>
	import {
		formatDate
	} from '@/utils/utools.js'
	const peopleShow = ref(false);
	const columns = reactive([
		['中国', '美国', '日本']
	]);
	const datetimeStartShow = ref(false);
	const datetimeEndShow = ref(false);
	const statusShow = ref(false);
	const contestInfo = reactive({
		playerNum: 0,
		teamMemberNum: 0,
		roundNum: 0,
		vipLv: null,
		gameTime: "",
		registerTime: '',
		startTime: '',
		endTime: '',
		description: '', //描述
		firstPrize: '', //一等奖
		firstPrizeNum: 0, //一等奖数量
		firstPrize: '', //二等奖
		firstPrizeNum: 0, //二等奖数量
		firstPrize: '', //三等奖
		firstPrizeNum: 0, //三等奖数量
		firstPrize: '', //四等奖
		firstPrizeNum: 0, //四等奖数量
	})
	const nowTime = Date.now(); //当前时间
	const fileList = ref([]);
	const timeShow = ref(false);
	const vipLvList = [{
		name: '初级',
		state: 1
	}, {
		name: '中级',
		state: 2
	}, {
		name: '高级',
		state: 3
	}, ]
	const confirmStartTime = (e) => { //选择开始时间
		if (e.value) {
			contestInfo.startTime = formatDate(e.value, 'yyyy-MM-dd hh:mm');
			datetimeStartShow.value = false;
		}
	}
	const confirmEndTime = (e) => { //选择结束时间
		if (e.value) {
			contestInfo.endTime = formatDate(e.value, 'yyyy-MM-dd hh:mm');
			datetimeEndShow.value = false;
		}
	}
	const confirmGameTime = (e) => { //选择比赛时间
		if (e.value) {
			contestInfo.gameTime = formatDate(e.value, 'yyyy-MM-dd hh:mm');
			timeShow.value = false;
		}
	}
	const confirmPeople = (e) => { //选择人数
		console.log('confirmPeople', e);
		contestInfo.teamMemberNum = e.value[0];
		peopleShow.value = false;
	}
	const changeVip = (state) => { //切换等级
		contestInfo.vipLv = state;
	}
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};
	const afterRead = async (event) => { //上传图片
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await $Api.uploadFile.uploadFilePromise(lists[i].url);
			if (result.code == '1') {
				let item = fileList.value[fileListLen];
				fileList.value.splice(fileListLen, 1, {
					...item,
					status: 'success',
					message: '',
					url: result.data.fullurl,
				});
			} else {
				let item = fileList.value[fileListLen];
				fileList.value.splice(fileListLen, 1, {
					...item,
					status: 'failed',
					message: '上传失败',
				});
			}
			fileListLen++;
		}
	}
</script>

<style lang="scss" scoped>
	.initiateTeam-box {
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.from-system {
		padding: 40rpx 28rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 20rpx;
		background-color: #222528;
		margin-bottom: 32rpx;

		.name {
			font-weight: bold;
			font-size: 30rpx;
			color: #E2E3E3;
		}

		.marB {
			margin-bottom: 28rpx;
		}
	}

	.from-box {
		width: 100%;

		.from-item {
			box-sizing: border-box;
			width: 100%;
			margin-top: 60rpx;

			// &:not(:last-child) {
			// 	margin-top: 32rpx;
			// }

			.from-name {
				display: block;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 38rpx;
			}

			.up-textarea-box {
				color: #fff;
			}



		}

		::v-deep.placeholderClass {
			color: #5B6868 !important;
			font-size: 26rpx;
			font-weight: 500;
		}

		.price-icon {
			font-weight: 500;
			font-size: 28rpx;
			color: #C2C3C4;
		}

		.minus-btn {
			width: 34rpx;
			height: 34rpx;
			background: #A7A8A9;
			border-radius: 4rpx;
			border-radius: 50%;
		}

		.input-num {
			width: 64rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
		}

		.plus-btn {
			width: 34rpx;
			height: 34rpx;
			background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
			box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 50%;
		}

		.example-body {
			flex: 1;
			justify-content: flex-end;

			.example-icon {
				font-size: 28rpx;
				color: #fff;
				margin: 0 24rpx;
			}
		}

		.vipLv-body {
			flex: 1;
			justify-content: space-between;

			.vipLv-item {
				width: 138rpx;
				height: 72rpx;
				background: #383B3E;
				border-radius: 36rpx;

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #EAF8F5;
				}
			}

			.active-vip {
				width: 138rpx;
				height: 72rpx;
				background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
				box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(108, 199, 190, 0.38);
				border-radius: 36rpx;

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #0A534F;
				}
			}
		}
	}

	.upload-box {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		background-color: #36393B;
		flex-direction: column;

		.text {
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 16rpx;
			color: rgba(255, 255, 255, 0.3);
		}
	}

	.submit-box {
		width: 336rpx;
		height: 84rpx;
		margin: 48rpx auto;
	}
</style>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__field {
		color: #fff !important;
	}
</style>